<template>
  <div class="user-info">
    <avatar class="avatar"></avatar>
    <div class="user-name">{{ oath.userInfo.name }}</div>
    <div class="operate">
      <router-link to="/release">
        <el-icon>
          <edit-pen></edit-pen>
        </el-icon>
        发布</router-link
      >
      <router-link :to="`/mine/${oath.userInfo.id}`">
        <el-icon>
          <notebook></notebook>
        </el-icon>
        我的笔记</router-link
      >
    </div>
    <div class="singout" @click="signOut">
      <el-icon><switch-button></switch-button></el-icon>
      <span class="word">注销</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Notebook, EditPen, SwitchButton } from '@element-plus/icons-vue';
import Avatar from '@components/avatar/avatar.vue';
import { useOathStore } from '@core/pinia/stores/oath';
import { useRouter } from 'vue-router';
// 路由对象，不用管
const router = useRouter();
// 状态管理，不用管
const oath = useOathStore();

// 退出登录
const signOut = () => {
  oath.clear();
  document.cookie = '';
  router.replace('/');
};
</script>

<style lang="scss" scoped>
.user-info {
  top: 75px;
  left: 30%;
  width: 150px;
  cursor: pointer;
  display: flex;
  height: 200px;
  border-radius: 5px;
  position: absolute;
  flex-direction: column;
  transform: translateX(-50%);
  background-color: var(--white-color);
  box-shadow: 0 0 30px rgb(0 0 0 / 10%);

  .user-name {
    margin-top: 40px;
    font-size: 20px;
    text-align: center;
  }

  .operate {
    flex: 1;
    margin-top: 20px;

    a {
      width: 100%;
      font-size: 18px;
      text-align: left;
      padding-left: 10px;
      margin-bottom: 10px;
      align-items: center;
      display: inline-flex;
      color: var(--grey-color2);
    }
  }

  .singout {
    display: flex;
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
    align-items: center;
    border-top: 1px solid var(--grey-color12);

    .word {
      margin-left: 5px;
      display: inline-block;
    }
  }

  .avatar {
    left: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    transform: translateY(-60%) translateX(-50%);
  }
}
</style>
